// 碳金融规模及助力减排效果展示
import React, { Children, useEffect, useState } from 'react';
import { connect } from 'dva';
import * as echarts from 'echarts';
import './financialScale.less';
import { getFinanceScaleStatistics } from '@/services/carbon'

const financialScale = (props) => {
  // 图表数据
  const [seriesData, setSeriesData] = useState({})

  useEffect(() => {
    // 调用获取图表接口
    fetchFinanceScaleStatistics()
  }, [])

  // 获取图表接口
  const fetchFinanceScaleStatistics = async () => {
    try {
      // 获取接口数据并赋值
      const res = await getFinanceScaleStatistics()
      if (res.code === 200) {
        setSeriesData(res.data)
      }
    } catch (error) {
      console.error(error);
    }
  };

  // 监听图表数据存在时渲染图表
  useEffect(() => {
    if (!seriesData.series) {
      return
    }
    let centerChart = echarts.init(document.getElementById("financialCenterChart"));
    let bottomChart = echarts.init(document.getElementById("financialBottomChart"));
    let centerSeries = []
    let centerXdata = []
    seriesData.series.forEach((item, index) => {
      if (item.name === '清洁能源贷款余额') {
        centerSeries.push({
          name: item.name,
          type: 'line',
          yAxisIndex: index,
          data: item.data,
          barWidth: '30px',
          smooth: true,  // 圆滑的折线
          showSymbol: false,  // 不显示数据点
          lineStyle: {
            color: '#25B6B6',
            width: 4
          }
        })
      } else {
        centerSeries.push({
          name: item.name,
          type: 'bar',
          yAxisIndex: index,
          data: item.data,
          barWidth: '30px',
          itemStyle: {
            color: '#5178FF'
          }
        })
      }
      if (index === 0) {
        centerXdata.push({
          data: item.xAxis
        })
      } else {
        centerXdata.push({
          data: item.xAxis,
          show: false
        })
      }
    })
    let bottomSeries = []
    let bottomXdata = []
    let bottomYAxisData = []
    bottomSeries.push({
      name: '清洁能源预估减排量',
      type: 'bar',
      yAxisIndex: 0,
      data: seriesData.data,
      barWidth: '30px',
      itemStyle: {
        color: '#25B6B6'
      }
    })
    bottomXdata = {
      data: seriesData.xAxis
    }
    bottomYAxisData.push({
      type: 'value',
      name: '单位：亿吨CO2',
      position: 'left',
      axisLabel: {
        formatter: '{value}'
      },
      splitLine: {
        show: true,  // 显示分隔线
        lineStyle: {
          type: 'dashed',  // 设置为虚线
          width: 3,  // 虚线宽度
          color: '#f7f7f7'  // 虚线颜色
        }
      },
    })
    // 绘制图表
    centerChart.setOption({
      tooltip: {
        backgroundColor: '#fff',
        borderColor: '#fff',  // 设置边框颜色
        borderWidth: 5,  // 设置边框宽度
        padding: [10, 10],  // 内边距，分别表示上下和左右间距
        // 可以根据需要设置其他样式，比如字体颜色、边框等
        textStyle: {
          color: '#000'  // 提示框文字颜色
        },
        // 自定义提示框内容
        formatter: function (params) {
          let tooltipContent = params[0].axisValue + '<br/>'; // 添加当前 x 轴内容
          params.forEach(function (item) {
            let unit = item.seriesName === '清洁能源贷款余额' ? '亿元' : '亿吨CO2'; // 根据系列下标判断单位类型
            tooltipContent += `${item.seriesName}:<span style="font-weight: bold;margin-left: 20px">${item.value}</span><span style="color: fff;margin-left: 20px">${unit}</span><br/>`;
          });
          return tooltipContent;
        },
        trigger: 'axis',
        axisPointer: {
          type: 'line',  // 设置为线型，可以是 'line' | 'shadow' | 'cross'
          lineStyle: {
            color: '#000',  // 参考线的颜色
            width: 2,  // 参考线的宽度
            type: 'dashed'  // 参考线的类型，可以是 'solid' | 'dashed' | 'dotted'
          }
        }
      },
      xAxis: centerXdata,
      yAxis: [
        {
          type: 'value',
          name: '单位：亿元',
          position: 'left',
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: true,  // 显示分隔线
            lineStyle: {
              type: 'dashed',  // 设置为虚线
              width: 3,  // 虚线宽度
              color: '#f7f7f7'  // 虚线颜色
            }
          },
        },
        {
          type: 'value',
          name: '单位：亿吨CO2',
          position: 'right',
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: false,  // 显示分隔线
            lineStyle: {
              type: 'dashed',  // 设置为虚线
              width: 3,  // 虚线宽度
              color: '#f7f7f7'  // 虚线颜色
            }
          },
        },
      ],
      grid: {
        containLabel: true,  // 包含刻度标签在内
        left: 0,  // 调整图表左边距
        right: 20,  // 调整图表右边距
        top: 10,  // 调整图表上边距
        bottom: 30,  // 调整图表下边距
        borderColor: '#ccc',  // 网格边框颜色
        borderWidth: 1,  // 网格边框宽度
        show: false  // 显示网格
      },
      series: centerSeries
    });
    bottomChart.setOption({
      tooltip: {
        backgroundColor: '#fff',
        borderColor: '#fff',  // 设置边框颜色
        borderWidth: 5,  // 设置边框宽度
        padding: [10, 10],  // 内边距，分别表示上下和左右间距
        // 可以根据需要设置其他样式，比如字体颜色、边框等
        textStyle: {
          color: '#000'  // 提示框文字颜色
        },
        // 自定义提示框内容
        formatter: function (params) {
          let tooltipContent = params[0].axisValue + '<br/>'; // 添加当前 x 轴内容
          params.forEach(function (item) {
            let unit = '亿吨CO2'// 根据系列下标判断单位类型
            tooltipContent += `${item.seriesName}:<span style="font-weight: bold;margin-left: 20px">${item.value}</span><span style="color: fff;margin-left: 20px">${unit}</span><br/>`;
          });
          return tooltipContent;
        },
        trigger: 'axis',
        axisPointer: {
          type: 'line',  // 设置为线型，可以是 'line' | 'shadow' | 'cross'
          lineStyle: {
            color: '#000',  // 参考线的颜色
            width: 2,  // 参考线的宽度
            type: 'dashed'  // 参考线的类型，可以是 'solid' | 'dashed' | 'dotted'
          }
        }
      },
      xAxis: bottomXdata,
      yAxis: bottomYAxisData,
      grid: {
        containLabel: true,  // 包含刻度标签在内
        left: 20,  // 调整图表左边距
        right: 10,  // 调整图表右边距
        top: 40,  // 调整图表上边距
        bottom: 30,  // 调整图表下边距
        borderColor: '#ccc',  // 网格边框颜色
        borderWidth: 1,  // 网格边框宽度
        show: false  // 显示网格
      },
      series: bottomSeries
    });
    // 绘制图表
    window.onresize = function () {
      // 自适应大小
      centerChart.resize();
      bottomChart.resize();
    };
  }, [seriesData])

  return (
    <div className="financial-content">
      <div className="top-box">
        <div className="title">清洁能源贷款余额及绿电减排量</div>
        <div id="financialCenterChart"></div>
      </div>
      <div className="bottom-box">
        <div className="title">清洁能源预估减排量</div>
        <div id="financialBottomChart"></div>
      </div>
    </div>
  )
};

export default connect()(financialScale);
